<template>
  <div class="manage">
    <div class="header">
        <div class="createButtons">
            <el-button type="primary" :icon="Plus"  >
                PC端新建
            </el-button>
            <el-button  :icon="Plus"  >
                手机端新建
            </el-button>
        </div>
        <div class="search">
            <el-select v-model="selectSearchTypes" placeholder="请选择">
                <el-option v-for="searchType in searchTypes" :key="searchType.value" :value="searchType.value" :label="searchType.label"></el-option>
            </el-select>
            <el-input :prefix-icon="Search" placeholder="大屏名称查询"></el-input>
        </div>
    </div>
    <div class="list">
        <div class="item" v-for="(item,index) in screenList" :key="index">
            <div class="item-bg">
                <div class="item-edit">
                    <el-button class="edit-button" type="primary" @click="editScreen(item.id)">编辑</el-button>
                    <div class="edit-funs">
                        <el-icon><DocumentCopy /></el-icon>
                        <el-icon><Delete /></el-icon>
                        <el-icon><View /></el-icon>
                        <el-icon><Download /></el-icon>
                    </div>
                </div>
            </div>
            <div class="item-info">
                <div class="name">大屏名称</div>
                <div class="size">1920*1080</div>
            </div>
        </div>
    </div>
    <el-pagination
      v-model:current-page="pageInfo.currentPage"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[6, 12, 24, 36]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    />
  </div>
</template>

<script lang="ts" setup>
import { Plus,Search } from '@element-plus/icons-vue';
import { ref,reactive } from 'vue';
import { type screenItem } from "@/types/screen";
import router from "@/router";

let selectSearchTypes = ref('1');

const searchTypes = [
    {
        value: '1',
        label: '全部',
    },
    {
        value: '2',
        label: 'PC端',
    },
    {
        value: '3',
        label: '移动端',
    }
];

const pageInfo = reactive({
    currentPage: 1,
    pageSize:10,
    total:1000
});

const screenList:screenItem[] = reactive([
    {
        id:"10101",
        name:"大屏名称",
        size:"1920*1080"
    }
]);

function editScreen(id:string){
    router.push(`/edit/${id}`);
}



</script>

<style lang="scss" scoped>
.manage{
    height: 100%;
    .header{
        display: flex;
        justify-content: space-between;
        .search{
            display: flex;
            .el-select{
                width: 150px;
                margin-right: 10px;
            }
        }
    }

    .list{
        display: flex;
        flex-wrap: wrap;
        height: calc(100% - 100px);
        overflow: auto;
        .item{
            width: 30%;
            margin: 1.5%;
            border: 1px solid #acacac;
            height: 200px;
            .item-bg{
                height: 160px;
                background: url(@/assets/image.png) no-repeat;
                background-size: cover;
                &:hover{
                    .item-edit{
                        display: flex;
                    }
                }
                .item-edit{
                    height: 100%;
                    width: 100%;
                    background: rgba(0,0,0,0.4);
                    display: none;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    .edit-button{
                        cursor: pointer;
                        width: 100px;
                    }
                    .edit-funs{
                        border-size: border-box;
                        color: white;
                        width: 150px;
                        display: flex;
                        justify-content: space-around;
                        padding: 15px;
                        .el-icon{
                            cursor: pointer;
                        }
                    }
                }
            }
            .item-info{
                height: 40px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 13px;
                background: #f2f3f7;
                color: #606266;
                font-size: 13px;
            }
        }
    }
    .el-pagination{
        height: 85px;
        float: right;
    }
}
</style>